<template>
  <div class="booking">
    <div class="booking-inner">
      <h3>购票详情</h3>
      <!-- 购票类型 -->
      <div class="booking-info">
        <!-- 成人票 -->
        <div class="booking-type"
             v-for="(item,key) of bookingList"
             :key="key.id">
          <div class="booking-type-left">
            <div>
              <h6>{{item.typeAdult}}</h6>
              <ul>
                <span class="time">
                  <img src="lvyouImg/bookingTime.png">
                  {{item.time}}
                </span>
              </ul>
              <ul>
                <!--
                    .因为是重新赋值的数组，使用forEach 和push一一放进ticketType中
                    .他是一个多维数组（取决于bookingList有多少项，它就是几维的数组）
                    .所以要根据当前循环的是第几次来判定它要循环第几维的数组
                -->
                <span class="title"
                      v-for="(val,keys) of ticketType[key]"
                      :key="keys">
                  {{val}}
                </span>
              </ul>
            </div>
          </div>
          <div class="booking-type-right">
            <a href="javascript:;">
              <strong>
                ￥
                <em>{{item.money}}</em>
              </strong>
              <em class="btn">立即预定</em>
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bookingList: Array
  },
  name: 'DetailsBooking',
  data () {
    return {
      // 因为要循环输出type 加上 v-for不支持对象的形式循环 所以将type这个数组送到一个空数组里
      ticketType: []
    }
  },
  methods: {
    getArray () {
      this.bookingList.forEach((item, index) => {
        this.ticketType.push(item.type)
      })
      return this.ticketType
    }
  },
  watch: {
    bookingList: function (newQuestion, oldQuestion) {
      this.ticketType.splice(0, this.ticketType.length)
      newQuestion.forEach((item, index) => {
        this.ticketType.push(item.type)
      })
      console.log(this.ticketType + 'watch')
    }
  },
  mounted () {
    this.getArray()
    // console.log(this.bookingList)
    console.log(this.ticketType)
    if (this.ticketType === Object) {
      console.log('this.ticketType的属性为：object')
    } else {
      console.log('this.ticketType的属性为：array')
    }
  }
}
</script>

<style lang="stylus" scoped>
.booking
  position relative
  .booking-inner
    position relative
    background #fff
    margin-bottom 0.2rem
    padding 0 0.16rem 0.3rem
    h3
      overflow hidden
      position relative
      z-index 4
      background #fff
      color #212121
      font-size 0.4rem
      line-height 0.56rem
      font-weight bold
      padding 0.32rem 0 0 0.04rem
      padding-left 0.04rem
    .booking-info
      background #f8f8f8
      padding 0 0.32rem
      margin 0.32rem 0 0.2rem
      border-radius 0.16rem
      .booking-type
        box-sizing border-box
        padding 0.32rem 0
        display flex
        width 100%
        position relative
        .booking-type-left
          flex 2.92
          align-items center
          display flex
          width 0.02rem
          h6
            overflow hidden
            text-overflow ellipsis
          ul
            padding-top 0.08rem
            overflow hidden
            .time
              display inline-block
              height 0.32rem
              color #00afc7
              font-size 0.24rem
              line-height 0.32rem
              white-space nowrap
              margin-top 0.08rem
              img
                display inline-block
                width 0.2rem
                max-height 0.32rem
                margin-right 0.04rem
                margin-top -0.06rem
                vertical-align 1
            .title
              display inline-block
              margin-top 0.08rem
              padding 0 0.04rem
              height 0.28rem
              color #00afc7
              font-size 0.2rem
              line-height 0.28rem
              white-space nowrap
              border 1px solid #a5e4ec
              border-radius 0.08rem
        .booking-type-right
          flex 1
          width 0.02rem
          align-items center
          display flex
          a
            box-sizing border-box
            display block
            width 100%
            padding-left 0.2rem
            strong
              display block
              overflow hidden
              height 0.28rem
              font-size 0.24rem
              line-height 0.28rem
              text-align center
              color #ff8300
              height 0.4rem
              em
                margin-left -0.07rem
                font-size 0.4rem
                line-height 0.4rem
            .btn
              height 0.52rem
              margin-top 0.12rem
              color #fff
              font-size 0.24rem
              line-height 0.52rem
              border-radius 0.3rem
              background-image linear-gradient(145deg, #ffab1e 0, #ff8c12 100%)
              display block
              overflow hidden
              text-align center
</style>
